<%@page contentType="text/html; charset=utf-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>韩顺平教育-家居网购</title>
    <!--为了让我们确定页面资源时使用一个固定的参考路径, 这里设置了base
         到jsp再优化-->
    <base href="<%=request.getContextPath()%>/">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css"/>
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css"/>
    <link rel="stylesheet" href="assets/css/style.min.css"/>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="script/axios.min.js"></script>
    <script type="text/javascript">

        $(function () {//页面加载完毕后执行 function
            $("#username").mouseleave(function () {
                var usernameValue = $(this).val();
                $.getJSON(
                    //这里尽量准确, 一把确定[复制粘贴]
                    /*"memberServlet", "action=isExistByName&username=" + usernameValue, function (data) {
                        alert(data.isExist);
                        console.log("data= ", data);//显示json格式的数据: 1.要用逗号; 2.要用console.log()
                    },*/
                    /*"memberServlet?action=isExistByName&username=" + usernameValue, function (data) {
                        alert(data.isExist);
                        console.log("data= ", data);//显示json格式的数据: 1.要用逗号; 2.要用console.log()
                    }*/
                    /*"memberServlet",
                    {
                        action: "isExistByName",
                        username: usernameValue
                    },
                    function (data) {
                        alert(data.isExist);
                        console.log("data= ", data);//显示json格式的数据: 1.要用逗号; 2.要用console.log()
                    }*/
                    "memberServlet",
                    {
                        "action": "isExistByName",
                        "username": usernameValue
                    },
                    function (data) {
                        alert(data.isExist);
                        //前端人员只能通过console.log()来查看你的数据, 然后才知道怎么获取你的数据
                        console.log("data= ", data);//显示json格式的数据: 1.要用逗号; 2.要用console.log()
                        if (data.isExist) {
                            $("span[class='errorMsg']").text("用户名 " + usernameValue + " 不可用");
                        } else {
                            $("span[class='errorMsg']").text("用户名 " + usernameValue + " 可用");
                        }
                    }
                )
            })

            //模拟一个点击事件, 选中注册
            //决定是显示登陆还是显示注册tab
            //如果注册失败, 显示注册tab, 而不能是默认的登录tab
            if ("${requestScope.active}" == "register_tab") {
                $("#register_tab")[0].click();
            }

            //对验证码图片进行处理, 绑定一个点击事件
            //功能: 可以获取新的验证码
            $("#captcha").click(function () {
                //先死后活
                //很多浏览器在url没有变化的时候, 图片不会发出新的请求
                //为了防止浏览器不请求 不刷新, 可以携带一个变化的参数
                this.src = "<%=request.getContextPath()%>/kaptchaServlet?d=" + new Date();

            });

            $("#code").blur(function () {//光标焦点离开事件
                var captchaValue = this.value;
                $.getJSON(
                    "memberServlet?action=verifyCaptcha&captcha=" + captchaValue, function (data) {
                        console.log("data= ", data);
                        if (data.verifyCaptcha) {
                            $("span.errorMsg2").text("验证码正确");
                        } else {
                            $("span.errorMsg2").text("验证码错误");
                        }
                    }
                );
            })


            $("#sub-btn").click(function () {
                //采用过关斩将法
                //正则表达式验证用户名
                var usernameValue = $("#username").val();
                var usernamePattern = /^\w{6,10}$/;
                if (!usernamePattern.test(usernameValue)) {
                    $("span[class='errorMsg']").text("用户名格式不对, 需要6-10个字符(大小写字母,数字,下划线)");
                    return false;
                }
                //验证密码
                var passwordValue = $("#password").val();
                var passwordPattern = /^\w{6,10}$/;
                if (!passwordPattern.test(passwordValue)) {
                    $("span.errorMsg").text("密码格式不对, 需要6-10个字符(大小写字母,数字,下划线)");
                    return false;
                }
                //两次密码要相同
                var rePwdValue = $("#repwd").val();
                if (passwordValue != rePwdValue) {
                    $("span.errorMsg").text("两次密码不相同");
                    return false;
                }
                //这里仍然采用过关斩将法
                //验证邮件
                var emailVal = $("#email").val();
                //在java中, 正则表达式的转义是\\; 在js中, 正则表达式转义是\
                var emailPattern = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
                if (!emailPattern.test(emailVal)) {
                    $("span.errorMsg").text("电子邮件的格式不正确, 请重新输入");
                    return false;
                }
                //验证码: 浏览器验证码不能为空
                var codeText = $("#code").val();
                //去掉验证码两端空格
                codeText = codeText.trim();
                if (codeText == "" || codeText == "") {
                    //提示
                    $("span.errorMsg").text("验证码不能为空");
                    return false;
                }

                //前台验证通过, 后台等待验证
                return true;
            });

            $(":submit:contains('Login')").click(function () {
                var usernameValue = $("form[action='loginServlet'] input:nth-child(1)").val();
                var passwordValue = $(":password:eq(0)").val();

                //正则表达式验证用户名
                var usernamePattern = /^\w{6,10}$/;
                if (!usernamePattern.test(usernameValue)) {
                    $("span[class='errorMsg']").text("用户名格式不对, 需要6-10个字符(大小写字母,数字,下划线)");
                    return false;
                }
                //验证密码
                var passwordPattern = /^\w{6,10}$/;
                if (!passwordPattern.test(passwordValue)) {
                    $("span.errorMsg").text("密码格式不对, 需要6-10个字符(大小写字母,数字,下划线)");
                    return false;
                }
            });

        })
    </script>
</head>

<body>
<!-- Header Area start  -->
<div class="header section">
    <!-- Header Top Message Start -->
    <!-- Header Top  End -->
    <!-- Header Bottom  Start -->
    <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->

            </div>
        </div>
    </div>
    <!-- Header Bottom  Start 手机端的header -->
    <div class="header-bottom d-lg-none sticky-nav bg-white">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.html"><img width="280px" src="assets/images/logo/logo.png"
                                                  alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Main Menu Start -->
    <div style="width: 100%;height: 50px;background-color: black"></div>
    <!-- Main Menu End -->
</div>
<!-- Header Area End  -->
<!-- login area start -->
<div class="login-register-area pt-70px pb-100px">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ml-auto mr-auto">
                <div class="login-register-wrapper">
                    <div class="login-register-tab-list nav">
                        <a class="active" data-bs-toggle="tab" href="#lg1">
                            <h4>会员登录</h4>
                        </a>
                        <a id="register_tab" data-bs-toggle="tab" href="#lg2">
                            <h4>会员注册</h4>
                        </a>
                    </div>
                    <div class="tab-content">
                        <div id="lg1" class="tab-pane active">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <!--base标签-->
                                    <%--登陆表单--%>
                                    <form action="memberServlet" method="post">
                                        <%--增加隐藏域表示登录请求--%>
                                        <input type="hidden" name="action" value="login"/>
                                        <span class="errorMsg"
                                              style="float: right; font-weight: bold; font-size: 20pt; margin-left: 10px;">${errorMsg}</span>
                                        <input type="text" name="username" value="${username}" placeholder="Username"/>
                                        <input type="password" name="password" placeholder="Password"/>
                                        <div class="button-box">
                                            <div class="login-toggle-btn">
                                                <input type="checkbox"/>
                                                <a class="flote-none" href="javascript:void(0)">Remember me</a>
                                                <a href="#">Forgot Password?</a>
                                            </div>
                                            <button type="submit"><span>Login</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div id="lg2" class="tab-pane">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <span class="errorMsg"
                                          style="float: right; font-weight: bold; font-size: 20pt; margin-left: 10px;">${requestScope.errorMsg}</span>
                                    <!--注册表单-->
                                    <form action="memberServlet" method="post">
                                        <%--增加隐藏域表示注册请求--%>
                                        <input type="hidden" name="action" value="register"/>
                                        <input type="text" id="username" name="username"
                                               value="${requestScope.username}" placeholder="Username"/>
                                        <input type="password" id="password" name="password"
                                               placeholder="输入密码"/>
                                        <input type="password" id="repwd" name="rePassword" placeholder="确认密码"/>
                                        <input name="email" id="email" value="${requestScope.email}"
                                               placeholder="电子邮件" type="email"/>
                                        <input type="text" id="code" name="captcha" style="width: 50%"
                                               placeholder="验证码"/>　　<img id="captcha" alt="" src="kaptchaServlet"
                                                                            style="width: 150px;">
                                        <span class="errorMsg2"
                                              style="float: right; font-weight: bold; font-size: 15pt; margin-left: 10px; color: lightgray;"></span>
                                        <div class="button-box">
                                            <button type="submit" id="sub-btn"><span>会员注册</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- login area end -->

<!-- Footer Area Start -->
<div class="footer-area">
    <div class="footer-container">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <!-- Start single blog -->
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-sm-6 col-lg-3 mb-md-30px mb-lm-30px" data-aos="fade-up"
                         data-aos-delay="400">
                        <div class="single-wedge">
                            <h4 class="footer-herading">信息</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="about.html">关于我们</a></li>
                                        <li class="li"><a class="single-link" href="#">交货信息</a></li>
                                        <li class="li"><a class="single-link" href="privacy-policy.html">隐私与政策</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="#">条款和条件</a></li>
                                        <li class="li"><a class="single-link" href="#">制造</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-2 col-sm-6 mb-lm-30px" data-aos="fade-up" data-aos-delay="600">
                        <div class="single-wedge">
                            <h4 class="footer-herading">我的账号</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="my-account.html">我的账号</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="cart.html">我的购物车</a></li>
                                        <li class="li"><a class="single-link" href="login.jsp">登录</a></li>
                                        <li class="li"><a class="single-link" href="wishlist.html">感兴趣的</a></li>
                                        <li class="li"><a class="single-link" href="checkout.html">结账</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="800">

                    </div>
                    <!-- End single blog -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row flex-sm-row-reverse">
                    <div class="col-md-6 text-right">
                        <div class="payment-link">
                            <img src="#" alt="">
                        </div>
                    </div>
                    <div class="col-md-6 text-left">
                        <p class="copy-text">Copyright &copy; 2021 韩顺平教育~</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer Area End -->
<script src="assets/js/vendor/vendor.min.js"></script>
<script src="assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="assets/js/main.js"></script>
</body>
</html>
